<template>
  <div class="page">
    <k-header title="开课吧">
      <i class="cubeic-tag"></i>
    </k-header>
    <cube-slide :data="slider" />
    <!-- <cube-button @click="logout">注销</cube-button> -->
    <goods-list :goods="goods" @cartanim="cartanimStart" />
    <!-- <cart-anim ref="ca" /> -->
  </div>
</template>

<script type="text/ecmascript-6">
import { mapActions, mapState, mapGetters } from "vuex";
import GoodsList from "../components/GoodsList";
import CartAnim from "../components/CartAnim";
import KHeader from "../components/Header";
export default {
  computed: {
    ...mapState({ slider: state => state.Goods.slider }),
    ...mapGetters(["goods"])
  },
  components: { GoodsList, CartAnim, KHeader },
  data() {
    return {};
  },
  created() {
    this.getGoods();
  },
  methods: {
    ...mapActions(["getGoods"]),
    cartanimStart(event) {
      // this.$refs.ca.start(event);
      //创建小球动画实例，开始动画
      // const anim = this.$createCartAnim({
      //   onTransitionend() {
      //     anim.remove();
      //   }
      // });
      // anim.start(event);

      //方法二
      //参数影响组件出现的位置
      const anim = this.$create(CartAnim, {
        pos: { left: "50%", bottom: "16px" }
      });
      anim.start(event);
      anim.$on("transitionend", anim.remove);
    }

    // logout() {
    //   this.$store.dispatch("logout", this);
    // }
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.page {
  overflow: scroll;
  height: 100%;
}
.cube-slide {
  height: 200px;
  img {
    width: 100%;
    height: 200px !important;
  }
}
</style>
